{% extends "base.html" %}
{% block css %}
    <link href="../static/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
{% endblock %}


{% block content %}
    {% if get_flashed_messages() %}
    <div class="alert alert-{% if get_flashed_messages(with_categories=True)[0][0]=='message' %}success{% else %}danger{% endif %} alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        {% for message in get_flashed_messages() %}
            <div class=flash>{{ message }}</div>
        {% endfor %}
    </div>
    {% endif %}
    <form class="form-horizontal" method="post" role="form">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="card_date" class="col-md-4 control-label">日期</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control form_datetime" id="card_date" name="card_date" readonly value="{{ onecard.card_date }}">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="card_dept" class="col-md-4 control-label">部门</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control typeahead" id="card_dept" name="card_dept" value="{{ onecard.card_dept }}" autocomplete="off" data-provide="typeahead">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="card_count" class="col-md-4 control-label">牌数</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="card_count" name="card_count" value="{{ onecard.card_count }}">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="card_source" class="col-md-4 control-label">来源</label>
                    <div class="col-md-8">
                        <select name="card_source" class="form-control">
                            <option value="邮件" {% if onecard.card_source=="邮件" %}selected{% endif %}>邮件</option>
                            <option value="纸质" {% if onecard.card_source=="纸质" %}selected{% endif %}>纸质</option>
                            <option value="电话" {% if onecard.card_source=="电话" %}selected{% endif %}>电话</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="card_date" class="col-md-4 control-label">编号</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="card_id" name="card_id" readonly value="{{ onecard.card_id }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="card_fibername" class="col-md-2 control-label">光缆名称</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="card_fibername" name="card_fibername" value="{{ onecard.card_fibername }}">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="card_fibercore" class="col-md-4 control-label">芯数</label>
                    <div class="col-md-8">
                        <select name="card_fibercore" class="form-control">
                            <option value="4" {% if onecard.card_fibercore==4 %}selected{% endif %}>4</option>
                            <option value="8" {% if onecard.card_fibercore==8 %}selected{% endif %}>8</option>
                            <option value="6" {% if onecard.card_fibercore==6 %}selected{% endif %}>6</option>
                            <option value="12" {% if onecard.card_fibercore==12 %}selected{% endif %}>12</option>
                            <option value="24" {% if onecard.card_fibercore==24 %}selected{% endif %}>24</option>
                            <option value="48" {% if onecard.card_fibercore==48 %}selected{% endif %}>48</option>
                            <option value="96" {% if onecard.card_fibercore==96 %}selected{% endif %}>96</option>
                            <option value="144" {% if onecard.card_fibercore==144 %}selected{% endif %}>144</option>
                            <option value="192" {% if onecard.card_fibercore==192 %}selected{% endif %}>192</option>
                            <option value="288" {% if onecard.card_fibercore==288 %}selected{% endif %}>288</option>
                        </select>
                    </div>
                </div>

            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="card_fiberlen" class="col-md-4 control-label">长度</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="card_fiberlen" name="card_fiberlen" value="{{ onecard.card_fiberlen }}">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <div class="col-md-offset-4 col-md-8">
                        <div class="checkbox">
                            <label>
                            <input type="checkbox" id="card_gis" name="card_gis" {% if onecard.card_gis %} checked {% endif %}> GIS已录入
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="card_fibercode" class="col-md-2 control-label">光缆编码</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="card_fibercode" name="card_fibercode" value="{{ onecard.card_fibercode }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label for="card_use" class="col-md-4 control-label">领用人</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control typeahead" id="card_use" name="card_use" value="{{ onecard.card_use }}" autocomplete="off">
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label for="card_action" class="col-md-4 control-label">经办人</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control typeahead" id="card_action" name="card_action" value="{{ onecard.card_action }}" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="card_memo" class="col-md-1 control-label">备注</label>
            <div class="col-md-11">
                <textarea class="form-control" rows="3" id="card_memo" name="card_memo">{{ onecard.card_memo }}</textarea >
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-1 col-md-10">
            {% if onecard %}
            <button type="submit" class="btn btn-primary" name="action" value="保存">保存</button>
            <button type="submit" class="btn btn-danger hidden" name="action" value="删除">删除</button>
{#            <button type="button" class="btn btn-info" name="action" value="生成标牌" id="card_cardprint">生成标牌</button>#}
            <a href="{{ url_for('Cardprint',id=onecard.card_id) }}" class="btn btn-warning" role="button">生成标牌</a>
            <button type="button" class="btn btn-warning" name="action" value="生成领用单" id="card_useprint">生成领用单(web)</button>
            <a href="{{ url_for('Useprint',ids=onecard.card_id) }}" class="btn btn-warning" role="button">生成领用单(word)</a>
            {% else %}
            <button type="submit" class="btn btn-primary" name="action" value="新增">新增</button>
            {% endif %}
            </div>
        </div>

    </form>
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr class="warning">
                <td colspan="13">今日标牌记录</td>
            </tr>
            <tr>
                <th class="text-center">#</th>
                <th class="text-center">日期</th>
                <th class="text-center">部门</th>
                <th class="text-center">光缆名称</th>
                <th class="text-center">光缆编码</th>
                <th class="text-center">芯数</th>
                <th class="text-center">长度</th>
                <th class="text-center">标牌数</th>
                <th class="text-center">领用人</th>
                <th class="text-center">经办人</th>
                <th class="text-center">来源</th>
                <th class="text-center">GIS</th>
                <th class="text-center">备注</th>
            </tr>
        </thead>
        <tbody>
        {% for card in cards %}
            <tr>
                <td class="text-center">{{ loop.index }}</td>
                <td class="text-center">{{ card.card_date }}</td>
                <td>{{ card.card_dept }}</td>
                <td><a href="{{ url_for('Card',card_id=card.card_id) }}">{{ card.card_fibername }}</a></td>
                <td>{{ card.card_fibercode }}</td>
                <td>{{ card.card_fibercore }}</td>
                <td>{{ card.card_fiberlen }}</td>
                <td>{{ card.card_count }}</td>
                <td>{{ card.card_use }}</td>
                <td>{{ card.card_action }}</td>
                <td>{{ card.card_source }}</td>
                <td class="text-center">
                    {% if card.card_gis %}
                        <span class="glyphicon glyphicon-ok"></span>
                    {% else %}
                        <span class="glyphicon glyphicon-remove"></span>
                    {% endif %}
                </td>
                <td>{{ card.card_memo }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="../static/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../static/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../static/Bootstrap-3-Typeahead/bootstrap3-typeahead.min.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $(".form_datetime").datetimepicker({
            format: 'yyyy-mm-dd',
            autoclose:true,
            todayBtn:true,
            todayHighlight:true,
            language:'zh-CN',
            minView:'month',
            viewMode:'month'
        });

        $.get('/json',function(data){
            console.log(data);
            $("#card_dept").typeahead({
                minLength:0,
                showHintOnFocus:true,
                source:data.depts
            });
            $("#card_action").typeahead({
                minLength:0,
                showHintOnFocus:true,
                source:data.actions
            });
            $("#card_use").typeahead({
                minLength:0,
                showHintOnFocus:true,
                source:data.uses
            });
        });



{#        $('.typeahead').click(function(){#}
{#            console.log('1');#}
{#            $(".typeahead").typeahead('lookup').focus();#}
{#        });#}


        $("#card_useprint").click(function(){
{#            window.open('/useprint?ids='+$("#id").val(), '_blank', 'height=768px, width=1024px, scrollbars=yes, resizable=yes');#}

            $.post('/useprint',{ids:$("#card_id").val()},function(res){
                var obj=window.open("about:blank");
                obj.document.write(res);
            });
        });
        $("#card_cardprint").click(function(){
            $.get('/cardprint/'+$("#card_id").val());
        });

    </script>
{% endblock %}